<template>
  <div class="container">
    <ProductHeader />
    <div class="main-body">
      <div class="body-top">{{ category?.frontDesc }}</div>
      <div class="body-main">
        <div
          class="item"
          v-for="item in itemList"
          :key="item.id"
          @click="goProdDetail(item.id)"
        >
          <Image :src="item.primaryPicUrl"></Image>
          <div class="item-bottom">
            <div class="item-desc">
              {{ item.name }}
            </div>
            <div class="item-price">
              ￥{{ item.finalPriceInfoVO.priceInfo.finalPrice?.price }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <BackTop />
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "ProdList",
});
</script>

<script lang="ts" setup>
import { useRoute, useRouter } from "vue-router";
import { onMounted, ref, computed } from "vue";
import { reqGetProdList } from "../../api/category";
import { BackTop, Image } from "vant";

const route = useRoute();
const router = useRouter();
const dataObj = ref({});
const getData = async () => {
  const { categoryId, subCategoryId } = route.query;
  const res = await reqGetProdList(
    (categoryId as any) * 1,
    (subCategoryId as any) * 1
  );
  dataObj.value = res.data;
};
const category = computed(() => dataObj.value.categoryItems?.category);
const itemList = computed(() => dataObj.value.categoryItems?.itemList);

// 跳转详情页面
const goProdDetail = (id: number) => {
  router.push(`/proddetail?id=${id}`);
};
onMounted(() => {
  getData();
});
</script>

<style scoped>
.container .main-body {
  width: 100%;
  text-align: center;
}
.container .main-body .body-top {
  margin: 20px auto;
  font-size: 15px;
}
.container .main-body .body-main {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  justify-content: space-around;
}
.container .main-body .body-main .item {
  width: 40%;
  border: 1px solid skyblue;
}
</style>
